@import "~@/common/stylus/variable.styl"
@import "~@/common/stylus/mixin.styl"

::-webkit-scrollbar
	width: 0

i, em
	font-style: normal

.login, .register
	position: absolute
	left: 0
	right: 0
	top: 0
	bottom: 0

.top
	display: flex
	align-items: center
	padding: 10px 20px
	background-color: rgba(0,0,0,.6)
	color: #fff
	.pic-wrap
		width: 40px
		img
			width: 40px
			height: 40px
	.info
		flex: 1
		position: relative
		margin-left: 10px
		line-height: 18px
	.install
		box-sizing: content-box
		position: absolute
		right: 0%
		top: 50%
		height: 18px
		margin-top: -15px
		padding: 5px 10px
		line-height: 16px
		border-radius: 5px
		border: 1px solid #eee
		cursor: pointer
		
.register-btn, .login-btn
	height: 40px
	width: 88%
	margin: 0 auto
	line-height: 40px
	border-radius: 4px
	border: none
	color: #fff
	text-align: center
	font-size: 18px
	letter-spacing: 2px
	overflow: hidden
	cursor: pointer
	i
		display: block
		background-color: $mc		

.login-text, .register-text
	width: 88%
	margin: 16px auto 0
	color: #47a1df
	height: 20px
	line-height: 20px
	overflow: hidden		
	.left
		float: left
	.right
		float: right		

.auth-btn
	display: flex
	justify-content: space-between	
	width: 88%
	margin: 50px auto 0
	padding: 0 20px
	a
		width: 135px
		height: 50px	
		&.sns-qq
			background: url('./qq.png') no-repeat 0% 0% /cover
		&.sns-wb
			background: url('./wx.png') no-repeat 0% 0% /cover

// 登录界面的form
.login-form
	width: 88%
	margin: 40px auto 40px
	padding: 20px 20px 20px 10px
	border-radius: 10px
	background-color: #fff
	overflow: hidden
	.line
		display: flex
		align-items: center
		&:first-child
			margin-bottom: 10px
		.icon
			width: 40px
			height: 40px
			text-align: center
			line-height: 38px
			font-size: 20px
			color: $mc
			
// 登录界面的form
.register-form
	width: 88%
	margin: 40px auto 40px
	padding: 20px 20px 20px 10px
	border-radius: 10px
	background-color: #fff
	overflow: hidden
	.line
		display: flex
		align-items: center
		&:first-child
			margin-bottom: 10px
		.icon
			width: 40px
			height: 40px
			text-align: center
			line-height: 38px
			font-size: 20px
			color: $mc
	.code 
		position: relative
		.code-img
			position: absolute
			right: 0
			top: 4px
			bottom: 4px
			width: 100px
			line-height: 32px
			text-align: center
			letter-spacing: 18px
			text-indent: 3px
			color: #fff
			font-size: 16px
			border-radius: 5px
			opacity: 0.8
			cursor: pointer
		
.loading
	position: fixed
	top: 50px
	bottom: 0
	left: 0
	right: 0
	z-index: 999
	width: auto
	height: auto

.top-enter-active, .top-leave-active
	transition:all 0.4s cubic-bezier(1.0, 0.5, 0.8, 1.0)
.top-enter
	transform: translate3d(0, -50px, 0)
.top-leave
	transform: translate3d(0, 0, 0)
	
.bottom-enter-active, .bottom-leave-active
	transition:all 0.4s cubic-bezier(1.0, 0.5, 0.8, 1.0)
.bottom-enter
	transform: translate3d(0, 55px, 0)
.bottom-leave
	transform: translate3d(0, 0px, 0)